<template>
  <div class="common_layer_b">
    <div class="warp">
      <h2 class="title"><slot></slot></h2>

      <div class="box">
        <ul>
          <router-link
            tag="li"
            :to="{
              name: 'comment',
              query: { id: data.id, title: data.title },
            }"
            v-for="data in rankData"
            :key="data.id"
          >
            <div class="img">
              <img :src="data.cover" alt="" />
            </div>
            <div class="book_title">{{ data.title }}</div>
            <div class="count" v-if="data.clickCount != -1">
              {{ data.clickCount | computedCount }}
            </div>
          </router-link>
        </ul>
      </div>
      <div class="go_rank" @click="$router.push({ name: 'ranking' })">
        查看榜单<span class="iconfont icon-anniu-jiantouxiangyou"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["rankData"],
};
</script>
<style lang="less" scoped>
.common_layer_b {
  padding: 0 13px;
  .warp {
    border-bottom: 1px solid #eeeeee;
    padding: 13px 0;
    .title {
      font-size: 18px;
      color: #232323;
      font-weight: 600;
    }
    .box {
      margin-top: 10px;
      ul {
        display: flex;
        justify-content: space-between;

        li {
          font-size: 12px;
          .img {
            width: 110px;
            height: 160px;
            box-shadow: 3px 2px 8px -3px #706e6b;
            img {
              width: 110px;
              height: 160px;
            }
          }
          .book_title {
            margin-top: 10px;
            width: 110px;
            color: #525252;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
          .count {
            margin-top: 5px;
            color: #d0d0d0;
          }
        }
      }
    }
  }
  .go_rank {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    // text-align: center;
    color: #d0d0d0;
    font-size: 12px;
    .iconfont {
      font-size: 15px;
    }
  }
}
</style>